<template>
  <div class="container">
    <!-- 回到顶部 -->
    <el-backtop target=".container" :visibility-height="300">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }
        "
      >
        UP
      </div>
    </el-backtop>

    <p><span style="font-size:48px;bord">回收站</span>
    <el-divider direction="vertical"></el-divider>
    <span>（本回收站保留删除30天内的试题，可选择恢复试题，或者彻底删除）</span></p>
    <!-- 多选，有关多个试题的统一操作：多个恢复，多个删除 -->
    <el-button type="primary" icon="el-icon-plus" @click="batchesRecovery">批量恢复</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="batchesDeleteComplete">批量删除</el-button>
    <!-- 回收站列表 -->
    <el-table style="width: 80%;margin:50px 0px" :data="list" ref="questionRecycleBinTable">
      <!-- 勾选框，供多选使用 -->
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="删除时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtModified }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="题目内容" width="width">
        <template slot-scope="{ row, $index }">
              <p v-html='row.name'></p>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="剩余天数" width="100" align="center">
        <template slot-scope="{ row, $index }">
          <el-tag>{{row.remainingDays}}</el-tag>  
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="180">
        <template slot-scope="{ row, $index }">
          <el-button
            size="mini"
            @click="handleRecovery(row)">恢复</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
export default {
  name: "QuestionRecycleBin",
  data() {
    return {
      store_info:{
        gmtCreate:"",
        gmtModified:"",
        id:"",
        isDeleted:"",
        name:"",
        remark:"",
        teacherId:"",
      },
      //已删除的题目列表
      list:[],
      //存储多选的试题ids
      questionIds:[],
    };
  },
  mounted(){
    this.store_info = JSON.parse(this.$route.query.store_info);
    this.getPageList();
  },
  methods:{
    //获取列表信息
    async getPageList(){
      //调用列表接口函数
      let result = await this.$API.personnal_question_store_management.reqGetPersonalQuestionHasDeleted(this.store_info.id);
      if(result.code==20000){
        this.list = result.data.personalQuestions;
      }
      console.log(this.list);
    },
    //恢复试题
    async handleRecovery(row){
      let params = {
        personalQuestionIds:row.id,
      };
      //调用批量添加的接口函数
      let result = await this.$API.personnal_question_store_management.reqRecoveryDeleted(this.$qs.stringify(params,{ indices: false }));
      if(result.code==20000){
        //弹出信息:恢复成功
        this.$message({
          type: "success",
          message: "恢复试题成功",
        });
        this.getPageList();
      }
    },
    //彻底删除试题
    handleDelete(row){
      //弹框
      this.$confirm('你确定彻底删除该试题吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async() => {
        //当用户点击确定按钮时会触发
        //向服务器发送请求
        let params = {
          personalQuestionIds:row.id,
        };
        let result = await this.$API.personnal_question_store_management.reqDeletePersonalQuestionBysIdComplete(this.$qs.stringify(params,{ indices: false }));
        //如果删除成功
        if(result.code==20000){
          this.$message({
            type: 'success',
            message: '彻底删除成功!'
          });
          //再次获取题库列表
          this.getPageList();
        }
        }).catch(() => {
        //当用户点击取消按钮时会触发
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    },
    //统计选中的题目id
    collectSelected(){
      var rowData = this.$refs.questionRecycleBinTable.selection;
      if(rowData.length){
        //有选中题目才会有操作
        //清空数组
        this.questionIds.length = 0;
        for(var i=0;i<rowData.length;i++){
          //抽取id存在questionIds里面
          this.questionIds.push(rowData[i].id);
        }
      }
    },
    //批量恢复
    async batchesRecovery(){
      //刷新questionIds
      this.collectSelected();
      let params = {
        personalQuestionIds:this.questionIds,
      };
      //调用批量添加的接口函数
      let result = await this.$API.personnal_question_store_management.reqRecoveryDeleted(this.$qs.stringify(params,{ indices: false }));
      if(result.code==20000){
        //弹出信息:添加|修改成功
        this.$message({
          type: "success",
          message: "批量恢复个性化试题成功",
        });
        this.getPageList();
      }
    },
    //批量彻底删除
    batchesDeleteComplete(){
      //统计ids
      this.collectSelected();
      //真的删除处
      //弹框
      this.$confirm('你确定彻底删除这些试题吗?题目将不再能恢复', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async() => {
        //当用户点击确定按钮时会触发
        //向服务器发送请求
        //调用个性化题库的彻底删除试题函数
          let params = {
            personalQuestionIds:this.questionIds,
          };
          let result = await this.$API.personnal_question_store_management.reqDeletePersonalQuestionBysIdComplete(this.$qs.stringify(params,{ indices: false }));
          //如果删除成功
          if(result.code==20000){
            this.$message({
              type: 'success',
              message: '个性化试题彻底删除成功!'
            });
            //再次获取题库列表
            this.getPageList();
          }
        }).catch(() => {
        //当用户点击取消按钮时会触发
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    },
  },
}
</script>

<style scoped>
.container {
  height: 500px;
  overflow-x: hidden;
}
</style>